<template>
  <el-dialog :title="!dataForm.id ? '新建' :'编辑'" :close-on-click-modal="false" append-to-body :visible.sync="visible"
    class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="top" @submit.native.prevent>
        <template v-if="!loading">
          <el-col :span="24">
            <el-form-item label="类型名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入类型名称，不超过8个字" :maxlength="8" clearable
                :style='{"width":"100%"}'>
              </el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { getAssoInfoType, addAssoInfoType, updateAssoInfoType } from '@/api/asso/info/category'

  export default {
    components: {},
    props: [],
    data() {
      return {
        visible: false,
        loading: false,
        btnLoading: false,
        dataForm: {
          name: '',
          creatoruserid: "",
          creatorTime: "",
          enabledMark: 1
        },
        rules: {
          name: [{
            required: true,
            message: '请输入类型名称，不超过8个字',
            trigger: 'blur'
          }, ],
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      clearData() {
        this.dataForm.name = '';
        this.dataForm.creatoruserid = "";
        this.dataForm.creatorTime = "";
        this.dataForm.enabledMark = 1
      },
      init(id) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            this.loading = true
            getAssoInfoType(this.dataForm.id).then((res) => {
              this.dataInfo(res.data)
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.clearData()
          }
        });
        this.$store.commit('generator/UPDATE_RELATION_DATA', {})
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            this.request()
          }
        })
      },
      request() {
        this.btnLoading = true
        let _data = this.dataList()
        if (!this.dataForm.id) {
          // 新增
          addAssoInfoType(_data).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refreshAssoInfoType', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        } else {
          // 修改
          updateAssoInfoType(this.dataForm.id, _data).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refreshAssoInfoType', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        }
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        return _data;
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        this.dataForm = _dataAll
      },
    },
  }
</script>
